<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>变量提升机制</title>
	</head>
	<body>
		<script type="text/javascript">
			// var a;
			// function fn1(){
			// 	console.log("fn1函数被触发了!");
			// }
			// var fn2;
			/* 
				顺序结构执行的代码, 正常情况下, 应该先对变量进行声明, 再使用变量. 如果使用变量在声明之前, 系统会报错!
				但是JS里, 系统会先将所有的变量和函数的声明提升到其作用域的最顶端. 但是这个提升是系统内部在做, 我们感知不到
				
				变量提升产生的后果:
				JS里, 函数或者变量都可以先使用,再声明
				
				变量提升的几种情况:
				1. 变量提升, 只提升变量的声明, 其赋的初始值不会被提升
				2. 函数声明提升时, 函数体本身会被提升到其作用域的最上面. 但是, 函数表达式在执行时, 只会提升变量, 不会将函数体提升, 如果提前调用, 会报错
				3. 正常顺序下, 函数与变量重名, 变量的优先级高; 在触发变量提升的情况下, 函数的优先级高
				4. 如果函数与函数重名, 不管是否触发变量提升机制, 永远是后面的覆盖前面的
			 */
			//1. 变量提升, 只提升变量的声明, 其赋的初始值不会被提升
			// console.log(a);
			// var a = 10;
			
			//2. 函数声明提升时, 函数体本身会被提升到其作用域的最上面. 但是, 函数表达式在执行时, 只会提升变量, 不会将函数体提升, 如果提前调用, 会报错
			// fn1();
			// function fn1(){
			// 	console.log("fn1函数被触发了!");
			// }
			// fn1();
			
			// fn2();
			// var fn2 = function(){
			// 	console.log("fn2函数触发了!");
			// }
			
			
			//3. 正常顺序下, 函数与变量重名, 变量的优先级高; 在触发变量提升的情况下, 函数的优先级高
			// console.log(fn3);
			// var fn3 = 100;
			// function fn3(){
			// 	console.log("fn3函数触发了!");
			// }
			// console.log(fn3);
			
			//4. 如果函数与函数重名, 不管是否触发变量提升机制, 永远是后面的覆盖前面的
			// fn4();
			// function fn4(){
			// 	console.log("fn4-----1111111");
			// }
			// function fn4(){
			// 	console.log("fn4-----2222222");
			// }
			// fn4();
			
			// var a = 100;
			// function fn5(){
			// 	console.log(a);
			// 	var a = 10;
			// }
			// fn5();
			
			
			
			
			
		</script>
	</body>
</html>
